Skip to main content

Pageflow - Page Events

The Pageflow module in Digisquares is a powerful tool designed to help users create, manage, and visualize workflows that control the behavior and interactions of webpages within a project. Pageflows automate responses to various page-level events, such as page loading, user navigation, control interactions, and application state changes, enabling sophisticated, dynamic web experiences.

By leveraging pageflows, businesses and developers can build highly interactive applications that respond intelligently to user actions and system changes without manually coding every interaction. This results in improved user engagement, smoother navigation, and more maintainable workflows.

Overview of the Pageflow Module​

The Pageflow module presents a centralized interface where users can:

  • View existing pageflows across the project.
  • Create new pageflows from scratch.
  • Edit or delete existing pageflows.
  • Add complex event-driven actions and triggers.
  • Visually design the flow logic with an intuitive drag-and-drop editor.

This module fits into the broader Digisquares ecosystem by bridging the gap between UI design and backend logic, allowing users to control application flow at a high level.

Pageflow List and Management Interface​

Upon navigating to the Pageflow section, you are presented with a comprehensive list of all pageflows within the current project. Key features include:

  • Pageflow Name: Clearly identifies each pageflow by a unique and descriptive name.
  • Description: Provides additional context to understand the purpose or behavior of the pageflow.
  • Created By: Displays the creator’s username to track ownership and collaboration.
  • Actions: Quickly access common operations like copying a pageflow to create a variant, editing to modify properties and actions, or deleting a pageflow that is no longer needed.

The list supports searching and sorting, making it easy to locate specific workflows, especially in projects with numerous pageflows.

Creating a New Pageflow​

To start creating a new pageflow, click the New Pageflow button. This opens a properties modal where you must specify the following:

  • Name: A mandatory field. Choose a clear, concise name that reflects the function or scope of the pageflow.
  • Description: Optional but recommended. Provide detailed notes explaining the pageflow’s objectives or any special configurations.

These properties help maintain clarity and ease of management, especially when collaborating within larger teams.

After entering the details, clicking OK initializes the pageflow, transitioning you to the visual editor to begin building the flow.

Understanding Actions and Triggers in Pageflow​

Actions are the core building blocks of pageflows. They define how the application responds to different triggers. The system categorizes actions into several event types:

1. PageTrigger​

The root trigger for pageflows, representing the initial event or condition that activates the workflow.

2. Page Events​

These represent interactions with the entire webpage, such as:

  • Entering or leaving a page.
  • Scrolling on the page.
  • Reloading or refreshing the page.

Page Events allow you to execute logic based on these interactions, such as loading specific content when the page is accessed or saving state when a user navigates away.

3. Control Events​

These are associated with user interactions on UI controls like:

  • Buttons
  • Forms
  • Dropdowns
  • Other input elements

Control Events enable dynamic responses to user inputs, such as validating a form field, enabling/disabling buttons, or triggering modal dialogs.

4. App State Events​

These track changes in the global state of the application, including:

  • Theme changes (e.g., light/dark mode toggling)
  • Locale or language updates
  • User data updates
  • Application errors or warnings

Responding to App State Events allows your pageflow to adapt the UI or behavior based on the overall application context.

5. Page State Events​

Focused on changes specific to a single webpage, Page State Events include:

  • Data load updates
  • Data modifications
  • Error handling specific to the page’s content

By reacting to these events, you can ensure the page displays accurate and up-to-date information dynamically.

Adding and Configuring Page Events​

When you choose to add a Page Event action, you are presented with a configuration dialog where you specify:

Select Page​

From a dropdown list, pick the target page where the event should be applied. This list includes all pages within your project, for example:

  • Login Page
  • Sample Login Page
  • Welcome Back Page
  • Register Form
  • Thank You Page
  • Application Form
  • Revenue Dashboard
  • Step Design

Selecting the correct page ensures that the pageflow triggers only on the desired page.

Select Event​

Choose the specific event to listen for on the selected page. Common events include:

  • onLoad: Fires when the page loads.
  • Other events could include onUnload, onScroll, or custom events (depending on platform capabilities).

After making selections, confirm by clicking OK to add the configured event to your pageflow.

Visual Pageflow Design and Editing​

Once the pageflow properties and initial actions are set, the visual editor provides a drag-and-drop interface where you can:

  • Add New Nodes: Insert new event handlers, control actions, or subflows.
  • Edit Existing Nodes: Modify configurations, rename, or adjust triggers.
  • Delete Nodes: Remove unwanted events or actions.
  • Undo/Redo: Revert or reapply changes for safe experimentation.
  • Connect Nodes: Define the logical flow by linking nodes, establishing execution order.

The editor displays nodes in a flowchart style, enabling quick understanding of complex workflows at a glance.

Managing Complex Workflows​

With multiple pages and events, workflows can become complex. The Pageflow module helps manage this complexity by:

  • Allowing modular creation of subflows.
  • Grouping related events visually.
  • Providing clear naming conventions and descriptions.
  • Supporting collaboration by showing authorship and versioning.

This structure encourages reuse and scalability across large projects.

Integration with Other Digisquares Modules​

Pageflows are not isolated; they integrate deeply with other modules such as:

  • UI: Directly interact with UI elements based on events.
  • Data: Trigger data fetches or updates on page or control events.
  • Library and Template: Use reusable components and templates within flows.
  • Workflow: Combine pageflows with backend or system workflows for end-to-end automation.

This ecosystem approach ensures that your page behaviors sync perfectly with the rest of the application logic.

Practical Use Cases​

1. Auto-Loading Content​

Use a Page Event on onLoad to fetch and display dynamic content immediately when a user navigates to a page, improving responsiveness.

2. Conditional Navigation​

Trigger control events or page state events to redirect users based on roles or data states, such as navigating to a dashboard after login.

3. Dynamic Form Validation​

Set Control Events on input fields to validate data live and provide immediate user feedback, preventing errors early.

4. Theme and Locale Adaptation​

Respond to App State Events to switch themes or languages dynamically, ensuring a consistent user experience.

Best Practices​

  • Use clear, descriptive names for pageflows and nodes to simplify maintenance.
  • Keep workflows modular by breaking down complex logic into smaller, manageable flows.
  • Test each event individually before combining them for smoother debugging.
  • Document flows thoroughly using the description fields.
  • Leverage Undo/Redo frequently to avoid losing progress during complex edits.

Summary​

The Pageflow - Page Events feature in Digisquares is a comprehensive system designed to automate and manage page-level behaviors in web applications. By combining properties, categorized actions, and a visual design interface, it empowers users to create dynamic, responsive pages that enhance the user experience.

This module is ideal for developers and business users alike, enabling intuitive creation of event-driven page interactions without requiring extensive coding knowledge. The result is a flexible, scalable, and maintainable approach to managing web page logic within the Digisquares platform.